<template>
<div id="loginPage" class="view">
<el-row class="header_login">
<el-col :span="4"><h2>用户登录</h2></el-col>
  <el-col :span="4" :offset="16">没有账户？<router-link to="/register">立即注册</router-link></el-col>
</el-row>
  <el-row style="padding: 60px;width: 500px;margin: auto">
    <el-form :label-position="labelPosition" label-width="80px" :model="form">
      <el-form-item label="用户名:">
        <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码:">
        <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <!--<el-form-item label="验证码:">-->
        <!--<el-input v-model="form.code" type="hidden"  placeholder="请输入验证码"></el-input>-->
      <!--</el-form-item>-->
      <el-form-item label="">
        <el-button type="danger" @click="login" style="width: 100%">登录</el-button>
      </el-form-item>
    </el-form>
  </el-row>

</div>
</template>

<script>
	import allGameList from '../../assets/hallList/allGameList.js'
	import hallLeftNav from '../../assets/hallList/hallLeftNav.js'
  import md5 from 'md5'
  
  export default {
    data () {
      return {
        labelPosition: 'right',
        form: {
          username: undefined,
          password: undefined,
          code: '123456'
        }
      }
    },
    methods: {
      getMyInfo () {
        this.$api.getMyInfo().then(res => {
          if (res.code === '000000') {
            this.$store.commit('myInfo', res.data)
            console.log(res.data)
          }
        })
      },
      login () {
        if (!this.form.username) {
          this.$message.info('请输入用户名')
        } else if (!this.form.password) {
          this.$message.info('请输入密码')
        } else {
            let params = {}
            Object.assign(params, this.form)
            params.password = md5(params.password)
            this.$api.login(params).then(res => {
	            this.$message.success('登录成功')
	            
	            window.sessionStorage.setItem("loginStatus", true)
	            this.$store.commit("c_login", true)
	            this.getMyInfo()
	            
	            //登录成功，调用彩种接口，预先加载所有彩种以及二三级玩法
		          var _this = this
		          allGameList(_this)
		          setTimeout(() => {
		          	hallLeftNav(_this)
		          	this.$router.push('/')
		          }, 1000)
            }, res => {
                console.log(res)
                this.$message.error('用户名或密码错误')
            })
        }
    	}
    }
  }
</script>

<style lang="less">
#loginPage{
  //margin: 30px 0 80px 10px;
  margin-top: 20px;
  border:1px solid #ddd;
  .header_login{
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ddd;
  }
}
</style>
